<template>
  <h1>User</h1>
  <h1 v-text="user.name"></h1>
  <button type="button" @click="bru">beforeRouteUpdate</button>
  <button type="button" @click="back">beforeRouteLeave</button>
</template>

<script>
export default {
  name: "User",
  data() {
    return {
      users: [
        {
          id: '1',
          name: 'user1'
        },
        {
          id: '2',
          name: 'user2'
        },
        {
          id: '3',
          name: 'user3'
        },
      ],
      user: {
        id: '',
        name: ''
      },
    }
  },
  methods: {
    bru() {
      this.$router.push({
        path: '3'
      });
    },
    back(){
      this.$router.back();
    }
  },
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this` ！
    // 因为当守卫执行时，组件实例还没被创建！
    console.log('beforeRouteEnter');
    next(function (vm) {
      for (const user of vm.users) {
        if (user.id === to.params.id) {
          vm.user = user;
          break;
        }
      }
    });
  },
  beforeRouteUpdate(to, from) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
    // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
    console.log('beforeRouteUpdate');
    for (const user of this.users) {
      if (user.id === to.params.id) {
        this.user = user;
        break;
      }
    }
  },
  beforeRouteLeave(to, from) {
    // 在导航离开渲染该组件的对应路由时调用
    // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
    // 钩子没有调用是因为 这个路由是直接输入路由路径进入的，为路由数组中的第一个，没有上一级，所以这个钩子没有调用
    console.log('beforeRouteLeave');
  },
}
</script>

<style scoped>

</style>